<template>
  <page-drawer v-model="cardOpen" :title='title' :icon='icon'>
    <div class="collectionWrapper">
      <xum-hint :visible="!isLogin">未登录，请登录后查看！</xum-hint>
      <template v-if="isLogin">
        <good-box-simple v-for="item in goods" :key="item.id" v-bind="item"/>
      </template>
    </div>
  </page-drawer>
</template>

<script>
import PageDrawer from './PageDrawer'
import GoodBoxSimple from '@/components/general/goods/GoodBoxSimple'
import { ResultCode } from '@/constants/constants'
import { queryCarConvertGoodsByPage } from '@/api/ApiUserCar'
import UserCarQueryDTO from '@/api/entity/UserCarQueryDTO'
import PageDTO from '@/api/entity/PageDTO'
import { convertDetailToSimpleGoodItem } from '@/utils/DataConvertUtils'
import { mapGetters, mapMutations, mapState } from 'vuex'
import XumHint from '@/components/XumHint'

export default {
  name: 'CardDrawer',
  props: ['open'],
  model: {
    prop: 'open',
    event: 'change'
  },
  components: {
    XumHint,
    GoodBoxSimple,
    'page-drawer': PageDrawer
  },
  data: () => {
    return {
      loading: false,
      cardOpen: false,
      title: 'Goods',
      icon: 'el-icon-goods'
    }
  },
  computed: {
    ...mapGetters('user', ['isLogin']),
    ...mapState('user', {
      userInfo: state => state.userInfo,
      goods: state => state.car.goods
    })
  },
  methods: {
    ...mapMutations('user', ['updateCarGoods']),
    queryData () {
      // noinspection JSValidateTypes
      this.updateCarGoods([])
      if (this.isLogin) {
        this.loading = true
        const pageDTO = PageDTO.instance()
        pageDTO.setCurrent(1)
        pageDTO.setSize(40)
        const wrapper = UserCarQueryDTO.instance()
        pageDTO.setCondition(wrapper)
        queryCarConvertGoodsByPage(pageDTO, data => {
          if (data && data.code === ResultCode.OK) {
            const goodsData = data.object['records']
            const list = []
            goodsData.forEach(item => {
              list.push(convertDetailToSimpleGoodItem(item['goodConvertVO']))
            })
            // noinspection JSValidateTypes
            this.updateCarGoods(list)
          }
        }, () => {
          this.loading = false
        })
      }
    }
  },
  watch: {
    open (val) {
      this.cardOpen = val
    },
    cardOpen () {
      this.$emit('change', this.cardOpen)
    },
    userInfo () {
      this.queryData()
    }
  }
}
</script>

<style lang="scss" scoped>

  .collectionWrapper{
    overflow-y: scroll;
    overflow-x: hidden;
    height: 500px;
    padding: 10px 40px
  }

</style>
